<template>
	<view>
		<view class="body after-navber">
		    <view class="info">
		        <view class="info-t" style="margin-top: 40rpx">我的账户</view>
		        <view class="info-account flex-y-center">
		            <image class="info-bg" src="/static/images/oJi1nrblmx9QXdUB.png"></image>
		            <view class="flex-row w-100">
		                <view class="flex-grow-1 flex-row">
		                    <view class="flex-grow-0">
		                        <image src="/pages2/static/images/icon-balance-recharge.png" style="width: 72rpx; height: 72rpx; margin-right: 20rpx"></image>
		                    </view>
		                    <view class="flex-grow-1" style="font-size: 19pt">余额</view>
		                </view>
		                <view class="flex-grow-0 flex-y-center" style="font-size: 21pt">￥{{ __user_info.money }}</view>
		            </view>
		        </view>
		        <view class="info-t" style="margin-top: 56rpx" v-if="is_first == 1">首充优惠</view>
		        <view class="list flex-row" v-if="is_first == 1">
		            <view @tap="click" :class="'one flex-x-center ' + (selected == index ? 'active' : '')" :data-index="index" v-for="(item, index) in list" :key="item.id">
		                <view v-if="item.send_price > 0">
		                    <view class="flex-x-center one-1">{{ item.pay_price }}</view>
		                    <view class="flex-x-center one-2 fs-sm" v-if="is_first == 1">送{{ item.send_price }}</view>
		                </view>
		
		                <view class="flex-y-center" v-else>
		                    <view class="flex-x-center one-1">{{ item.pay_price }}</view>
		                </view>
		            </view>
		        </view>
		        <view @tap="click" class="one-type" data-index="-1" v-if="balance.type == 1">
		            <view class="flex-y-center" style="height: 100%">
		                <input @input="input" class="r-input" placeholder="手动输入充值金额" placeholderClass="r-input-p" type="number" :value="money" />
		            </view>
		        </view>
		        <view @tap="pay" class="recharge-btn flex-x-center flex-y-center">立即充值</view>
		        <view class="info-t" style="margin-top: 72rpx">充值说明</view>
		        <view class="info-t" style="border: 0; line-height: 1.5">
		            <text>{{ balance.help }}</text>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_first:1,
				selected:-1,
				list:[{
					name:'1000送2000',
					pay_price:'1000.00',
					send_price:'2000.00'
				}],
				__user_info:{
					money:'19670.00'
				},
				balance:{
					type:'1',
					help:'最大充值金额为10000元'
				}
			}
		},
		methods: {
		click: function (e) {
			this.selected=e.currentTarget.dataset.index
		},
		}
	}
</script>

<style>
.info {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 12rpx;
    border-top: 1rpx solid #e2e2e2;
}

.info-t {
    color: #999;
    margin: 24rpx 12rpx;
    line-height: 1;
    padding: 0 24rpx;
    border-left: 6rpx solid #ff4544;
}

.list {
    margin-bottom: 16rpx;
    flex-wrap: wrap;
}

.one {
    width: 218rpx;
    border: 1rpx solid #ccc;
    border-radius: 16rpx;
    padding: 32rpx 0;
    margin-right: 12rpx;
    margin-left: 12rpx;
    margin-bottom: 24rpx;
    position: relative;
}

.one-1 {
    color: #666;
}

.one-2 {
    color: #999;
}

.one.active .one-1 {
    color: #ff4544;
}

.one.active .one-2 {
    color: #ff4544;
}

.recharge-btn {
    width: 702rpx;
    height: 96rpx;
    margin: 56rpx 12rpx 0 12rpx;
    border-radius: 48rpx;
    background-color: #ff4544;
    color: #fff;
}

.r-input {
    height: 88rpx;
    border-radius: 16rpx;
    color: #666;
    line-height: 88rpx;
    padding: 0 28rpx;
    width: 650rpx;
}

.r-input-p {
    line-height: 88rpx;
    color: #ddd;
}

.active {
    border-color: #ff4544;
    background-color: #fff6f6;
}

.info-account {
    margin: 8rpx 12rpx 32rpx 12rpx;
    width: 702rpx;
    height: 160rpx;
    position: relative;
    padding: 0 56rpx 0 40rpx;
    color: #666;
    z-index: 10;
}

.info-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.one-type {
    width: 702rpx;
    height: 100rpx;
    margin: 0 12rpx;
    border: 1rpx solid #ccc;
    border-radius: 16rpx;
    color: #666;
}
</style>
